<template>
  <view class="login-container">
    <!-- 顶部 Logo 与欢迎语 -->
    <view class="logo-box">
      <image class="logo" src="/static/icons/dog.png"></image>
      <text class="welcome">你好！欢迎登录宠立派</text>
    </view>

    <!-- 协议勾选 -->
    <checkbox-group @change="onAgreeChange" class="protocol-box">
      <label class="protocol-row">
        <checkbox value="agree" :checked="agree" />
        <text class="protocol-text">
          我已阅读并同意
          <text class="link" @click="goPrivacy">《隐私政策》</text>
          和
          <text class="link" @click="goAgreement">《用户协议》</text>
        </text>
      </label>
    </checkbox-group>

    <!-- 登录按钮 -->
    <button
      v-if="!agree"
      class="login-btn login-btn-disabled"
      disabled
      @click="tipAgree"
    >手机号快捷登录</button>

    <button
      v-else
      class="login-btn"
      open-type="getPhoneNumber"
      @getphonenumber="onGetPhoneNumber"
    >手机号快捷登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return { agree: false }
  },
  methods: {
    onAgreeChange(e) {
      this.agree = (e.detail.value || []).includes('agree')
    },
    tipAgree() {
      uni.showToast({ title: '请先勾选并同意协议', icon: 'none' })
    },
    goPrivacy() {
      uni.navigateTo({ url: '/pages/protocol/privacy' })
    },
    goAgreement() {
      uni.navigateTo({ url: '/pages/protocol/agreement' })
    },
    onGetPhoneNumber(e) {
      if (!e.detail || (!e.detail.code && !e.detail.encryptedData)) {
        uni.showToast({ title: '用户取消或授权失败', icon: 'none' })
        return
      }

      // 1. 先 wx.login 获取登录 code
      uni.login({
        provider: 'weixin',
        success: (res) => {
          if (!res.code) {
            uni.showToast({ title: 'wx.login 失败', icon: 'none' })
            return
          }

          // 2. 走新版手机号登录
          if (e.detail.code) {
            uni.request({
              url: 'http://192.168.150.215:8080/wxLogin/wxPhoneLogin',
              method: 'POST',
              data: { loginCode: res.code, phoneCode: e.detail.code },
              success: this.handleLoginResp,
              fail: () => uni.showToast({ title: '网络错误', icon: 'none' })
            })
          } 
        },
        fail: () => uni.showToast({ title: 'wx.login 调用失败', icon: 'none' })
      })
    },
    handleLoginResp(resp) {
      if (resp.data && resp.data.code === 200 && resp.data.data && resp.data.data.token) {
        const { token, user } = resp.data.data
        uni.setStorageSync('token', token)
        if (user) uni.setStorageSync('user', user)
        uni.showToast({ title: '登录成功', icon: 'success' })
        uni.reLaunch({ url: '/pages/index/index' })
      } else {
        uni.showToast({ title: resp.data?.msg || '登录失败', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex; flex-direction: column; align-items: center;
  padding: 80rpx 40rpx; background: #fff; min-height: 100vh;
}
.logo-box { text-align: center; margin-bottom: 80rpx; }
.logo { width: 160rpx; height: 160rpx; border-radius: 30rpx; margin-bottom: 20rpx; }
.welcome { font-size: 34rpx; font-weight: bold; color: #333; }

.protocol-box { width: 100%; margin: 20rpx 0 40rpx; }
.protocol-row { display: flex; align-items: flex-start; }
.protocol-text { font-size: 26rpx; color: #666; margin-left: 12rpx; line-height: 1.6; }
.link { color: #007aff; }

.login-btn {
  width: 90%; height: 96rpx; line-height: 96rpx;
  border-radius: 48rpx; font-size: 32rpx;
  background: #07c160; color: #fff;
}
.login-btn-disabled { background: #c8c8c8; color: #fff; }
</style>
